<template>
	<view class="body">
		<xk-header title="物业信息"></xk-header>
		<view class="util-bar">
			<!-- <view class="search-area">
				<view class="search-input">
					<image class="search-icon" src="/static/search.png"></image>
					<input @confirm="searchInfo" v-model="searchText" placeholder="楼栋信息" placeholder-class="placeholder"/>
				</view>
			</view> -->
			<view class="picker-bar">
				<!-- 楼栋 -->
				<picker :range="assetsType" :value="assetsIndex" range-key="property_type_name" @change="assetsTypeChange">
					<view class="sort-item-view">
						<view v-if="assetsIndex === ''">物业类型</view>
						<view v-else>{{ assetsType[assetsIndex].property_type_name }}</view>
						<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')" />
					</view>
				</picker>
				<!-- 楼栋 -->
				<picker :range="buildings" :value="buildIndex" range-key="building" @change="buildingChange">
					<view class="sort-item-view">
						<view v-if="buildIndex === ''">楼栋</view>
						<view v-else>{{ buildings[buildIndex].building }}</view>
						<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')" />
					</view>
				</picker>
				<!-- 楼层 -->
				<picker :range="storeys" :value="storeyIndex" range-key="storey" @change="storeyChange">
					<view class="sort-item-view">
						<view v-if="storeyIndex === ''">楼层</view>
						<view v-else>{{ storeys[storeyIndex].storey }}</view>
						<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')" />
					</view>
				</picker>

				<view class="sort-item-view" @click="resetSort()">
					<view>重置</view>
				</view>
			</view>
		</view>
		<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" @scrolltolower="getData" scroll-y
			:style="'height:calc' + (scrollViewHeight + 'rpx' - '230rpx')">
			<view v-if="assetsList.length > 0" class="data-list" style="padding-top: 20rpx;">
				<!-- <checkbox-group @change="checkboxChange"> -->
				<view class="data-item" v-for="(item, index) of assetsList" v-if="!selectItemMap[item.property_id]"
					:key="index">
					<view>
						<view class="item-top">
							<!-- <checkbox :value="item.property_id" :checked="selectIndexList.indexOf(item.property_id) !== -1"/> -->
							<view class="title">物业编号: {{ item.property_code || "" }}</view>
						</view>
						<view class="item-middel">
							<image v-if="item.property_image" mode="aspectFill" class="img"
								:src="item.property_image | formatImgPath('260', '195')" />
							<image v-else mode="aspectFill" class="img" :src="(imgUrl+'/wx/default_img.jpg')" />
							<view class="info">
								<view>
									<view class="name">{{ item.tag_name || "-" }}</view>
									<view class="desc">建筑面积{{ item.sharing_area }}㎡/{{ item.building }}/{{ item.storey }}
									</view>
								</view>
								<view>
									<view class="amount">{{ (item.pricing_amount || "") |
										formatMoneyNo00 }}元/月</view>
									<view class="desc">{{ (item.room_price || "") |
										formatMoneyNo00 }}元/㎡</view>
								</view>
							</view>
						</view>
					</view>
					<view class="btn-view">
						<view class="common-btn btn-sty2 btn" @click="addBuild(item)">添加</view>
					</view>
				</view>
				<!-- </checkbox-group> -->
			</view>
			<view class="empty-view" v-else>
				<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
				<view>哎呀，该界面暂无内容~</view>
			</view>
			<!-- <view class="common-zw" style="width: 750rpx;"></view> -->
		</scroll-view>
		<view class="common-bottom-view select-view" style="height: 200rpx;">
			<view class="title">已选中物业</view>
			<view class="select-list">
				<view v-for="(item, index) of selectItem" :key="index" class="select-item">
					<view class="info">{{ item.tag_name }}/{{ item.building }}/{{ item.storey }}</view>
					<image @click="deleteItem(index)" class="del-icon" :src="(imgUrl+'/wx/delete.png')"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgUrl:this.$config.BASE_imgUrl,
			searchText: '',
			scrollViewHeight: 0,
			startNum: 0,
			isAll: false,
			assetsList: [],
			selectIndexList: [],
			selectItemMap: {},
			selectItem: [],
			assetsIndex: '',
			assetsType: [],
			buildIndex: '',
			buildings: [],
			storeyIndex: '',
			storeys: [],
		}
	},
	onLoad(options) {
		if (options.ids) {
			this.selectItem = JSON.parse(options.ids || '[]')
			for (let item of this.selectItem) {
				this.selectItemMap[item.property_id] = true;
			}
		}
		this.getFilterInfo()
		this.getData();
	},
	mounted() {
		this.$util.getHeightWithTopEl(".util-bar").then(height => {
			this.scrollViewHeight = height;
		});
	},
	methods: {
		getFilterInfo() {
			this.$api.assets_getAssetsType().then((res) => {
				this.assetsType = res.propertyTypeList
			})
		},
		resetSort() {
			this.assetsIndex = ''
			this.buildIndex = ''
			this.storeyIndex = ''
			this.searchInfo();
		},
		deleteItem(index) {
			this.selectItemMap[this.selectItem[index].property_id] = false;
			this.selectItem.splice(index, 1);
		},
		addBuild(item) {
			uni.$emit('getBuildInfo', this.selectItem);
			this.selectItemMap[item.property_id] = true;
			this.selectItem.push({
				tag_name: item.tag_name,
				building: item.building,
				storey: item.storey,
				property_id: item.property_id
			})
		},
		assetsTypeChange(e) {
			this.assetsIndex = e.detail.value
			this.buildIndex = ''
			this.storeyIndex = ''
			this.$api.assets_getFilter(this.assetsType[this.assetsIndex].property_type_id).then((res) => {
				this.buildings = res.filter_BuildingRange
				this.storeys = res.filter_StoreyRange
			})
			// console.log('this.buildings',)
			this.searchInfo()
		},
		buildingChange(e) {
			this.buildIndex = e.detail.value
			this.searchInfo()
		},
		storeyChange(e) {
			this.storeyIndex = e.detail.value
			this.searchInfo()
		},
		searchInfo() {
			this.isAll = false;
			this.startNum = 0;
			uni.showLoading({
				title: '加载中'
			})
			this.getData()
		},
		selectBuilding() {
			// uni.$emit('getBuildInfo', this.selectIndexList);
			uni.navigateBack()
		},
		getData() {
			if (!this.isAll) {
				let params = {
					start: this.startNum,
				}
				if (this.assetsIndex !== '') {
					params.property_type_id = this.assetsType[this.assetsIndex].property_type_id
				}
				if (this.buildIndex !== '') {
					params.building_range = `["${this.buildings[this.buildIndex].building}"]_nostr`
				}
				if (this.storeyIndex !== '') {
					params.storey_range = `["${this.storeys[this.storeyIndex].storey}"]_nostr`
				}
				this.$api.baseData_getAssetsPropertyForRentable(params).then((res) => {
					if (res.length < 20) {
						this.isAll = true;
					}
					if (this.startNum == 0) {
						this.assetsList = res;
					} else {
						this.assetsList = this.assetsList.concat(res);
					}
					this.startNum += 20;
				})
			}

		}
	}
}
</script>

<style lang="scss" scoped>
.picker-bar {
	display: flex;
	background-color: #FFFFFF;
	justify-content: space-around;
	align-items: center;
	height: 100rpx;
	flex-direction: row;
	font-size: 28rpx;
	font-weight: bold;

	.sort-item-view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;

		.xiala {
			width: 21rpx;
			height: 13rpx;
			margin-left: 10rpx;
		}
	}

	.scan-view {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: flex-end;

		.scan {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}
}

.common-bottom-view {
	display: flex;
	flex-direction: column;
	padding: 10rpx 30rpx 30rpx 30rpx;
	box-sizing: border-box;
	// .common-btn{
	// 	margin: 10rpx 30rpx;
	// }
}

.select-view {
	.title {
		font-size: 24rpx;
		color: #999999;
	}
}

.select-list {
	display: flex;
	flex-wrap: wrap;
	flex: 1;

	.select-item {
		position: relative;
		display: flex;
		align-items: center;
		background-color: #ebebeb;
		color: #333333;
		font-size: 24rpx;
		height: 50rpx;
		padding: 0 70rpx 0 20rpx;
		border-radius: 40rpx;
		margin: 10rpx 10rpx 0 0;

		.del-icon {
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			top: 0;
			right: 0;
		}
	}
}

.search-area {
	background-color: #FFFFFF;
	padding: 20rpx 30rpx;

	.search-input {
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		display: flex;
		flex: 1;
		align-items: center;

		.search-icon {
			width: 48rpx;
			height: 48rpx;
			margin: 0 20rpx 0 30rpx;
		}

		input {
			height: 80rpx;
			font-size: 28rpx;
			flex: 1;
		}
	}
}

.data-list {
	border-radius: 10rpx;
	height: calc(100vh - var(--status-bar-height) - 100rpx - 130rpx);

	.data-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		padding: 20rpx;
		color: #333;
		font-size: 28rpx;
		white-space: normal;

		.item-title {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.title {
				flex: 1;
			}

			.status-other {
				padding: 5rpx 15rpx;
				font-size: 24rpx;
				color: #2C72FF;
				background-color: rgba($color: #A5C2FF, $alpha: 0.16);
				border-radius: 5rpx;
			}

			.status {
				color: #FF6400;
				background-color: rgba($color: #FFCDA5, $alpha: 0.16);
			}
		}

		.item-top {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			>checkbox {
				margin-right: 5rpx;
			}


			.title {
				flex: 1;
			}
		}

		.item-middel {
			display: flex;
			margin-top: 10rpx;

			.img {
				width: 200rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}

				.desc {
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
				}

				.amount {
					font-size: 36rpx;
					color: #FF3737;
					font-weight: 700;

					text {
						font-size: 24rpx;
						color: #FF3737;
						font-weight: 600;
					}
				}
			}
		}

		.location-view {
			display: flex;
			margin-top: 30rpx;
			padding-top: 20rpx;
			align-items: flex-start;
			font-size: 24rpx;
			border-top: 1rpx #eee solid;

			.dingwei {
				width: 30rpx;
				height: 30rpx;
				margin-top: 5rpx;
			}

			.address {
				color: #333;
				margin-left: 10rpx;
			}

			.date1 {
				color: #999;
				margin: 10rpx 0rpx;
			}

			.date2 {
				color: #2C72FF;
			}
		}

		.data-sub-item {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #F8F8F8;
		}

		.date-view {
			font-size: 28rpx;
			margin-top: 30rpx;
			margin-bottom: 30rpx;

			:first-child {
				color: #999;
			}

			:last-child {
				color: #2C72FF;
				margin-top: 20rpx;
			}
		}

		.btn-view {
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;

			.btn {
				font-size: 28rpx;
				width: 175rpx;
				height: 60rpx;
				margin: 0;
			}

			.btnNoBg {
				background-color: #FFFFFF;
				border: 1rpx #999999 solid;
				margin-right: 20rpx;
			}

		}
	}
}
</style>
